<template>
  <view class="wrapper">
    <view class="search-wrapper">
      <view class="flex-start profession-wrapper"
            @click="showEvent">
        <view class="text">{{ labelValue }}</view>
        <image src="/static/img/sel.png"
               class="sel-icon"></image>
      </view>
      <view class="flex-start profession-wrapper status-wrapper"
            @click="statusShow = true">
        <view class="text">{{ labelStatusValue }}</view>
        <image src="/static/img/sel.png"
               class="sel-icon"></image>
      </view>
    </view>
    <view class="header flex-between">
      <view>帖子总数：{{ total }}</view>

    </view>
    <view class="content">
      <uni-swipe-action>
        <uni-swipe-action-item v-for="(item, index) in tableData"
                               :key="index"
                               :right-options="options1"
                               @click="bindClick($event, item)">
          <view class="list-item">
            <view class="title overTextMultiple title-wrapper">
              <view class="text">{{ item.title }}</view>
              <view class="status-wrapper pass"  v-if="item.auditStatus === '1'">
                <img class="status-image"
                     src="/static/img/community/pass.png"
                     alt=""
                     srcset="">
                <view class="status-text">审核通过</view>
              </view>
							<view class="status-wrapper nopass" v-else-if="item.auditStatus === '2'">
							  <img class="status-image"
							       src="/static/img/nopass.png"
							       alt=""
							       srcset="">
							  <view class="status-text">审核不通过</view>
							</view>
							<view class="status-wrapper doing" v-else>
							  <img class="status-image"
							       src="/static/img/doing.png"
							       alt=""
							       srcset="">
							  <view class="status-text">审核中</view>
							</view>
            </view>
            <view class="con flex-between">
              <view class="con-item-left">
                <view class="left flex-start">
                  <image v-if="item.firstImg"
                         :src="item.firstImg"
                         class="img-item"></image>
                  <view class="editorcontent overTextMultiple">{{ item.editContent }}</view>
                </view>
                <view class="flex-between">
                  <view>{{ item.sendTime }}</view>
                  <view class="flex-start dic-all">
                    <span class="icon-text" v-for="(keys, ind) in item.subjectTypeList">{{ keys }}</span>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>
    <u-select v-model="show"
              mode="mutil-column-auto"
              :label-name="'text'"
              :list="dictList"
              @confirm="confirm"></u-select>
		<u-select v-model="statusShow"
		          mode="mutil-column-auto"
		          :label-name="'text'"
		          :list="dictStatusList"
		          @confirm="confirmStatus"></u-select>
    <u-modal v-model="delshow"
             content="是否删除该帖子"
             :showCancelButton="true"
             @confirm="delArticle"></u-modal>
  </view>
</template>

<script>
import apis from "@/apis.js";
import { mapState, mapActions, mapMutations } from "vuex";
// import uniSwipeSction from "../../../components/uni-swipe-action/uni-swipe-action.vue";
export default {
  components: {
  },
  data() {
    return {
			statusShow: false,
      show: false,
      delshow: false,
      labelValue: "全部专业",
			labelStatusValue: '全部状态',
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        subjectType: "",
				auditStatus: '',
      },
			total: 0,
			dictStatusList: [
				{
					text: "全部状态",
					title: "全部状态",
					value: ""
				},
				{
					text: "审核中",
					title: "审核中",
					value: "0"
				},
				{
					text: "审核通过",
					title: "审核通过",
					value: "1",
				},
				{
					text: "审核不通过",
					title: "审核不通过",
					value: "2",
				}
			],
      dictList: [],
      tableData: [],
      delId: null, // 删除id
      options1: [
        {
					imgflag: true,
					src: "/static/img/edit.png",
          text: "编辑",
					style: {
						backgroundColor: "#F8F9FB"
					}
        },
        {
					imgflag: true,
					src: "/static/img/ic_del.png",
          text: "删除",
					style: {
						backgroundColor: "#F8F9FB"
					}
        },
      ],
    };
  },
  onShow() {
    this.listQuery.pageNo = 1;
    this.tableData = [];
    this.getList();
    this.getDiceData();
  },
  computed: {
    ...mapState(["img_url"]),
  },
  methods: {
    bindClick(e, item) {
			let { content } = e;
			if (content.text == "编辑") {
				this.joinPath(item)
			} else {
				this.delShow(item)
			}
    },
    getList() {
      this.$http.get(apis.getMyArticleList, this.listQuery).then((res) => {
        if (res.data.code === 200) {
          this.tableData = this.tableData.concat(res.data.result.records);
					this.total = res.data.result.total
          this.tableData.forEach((item) => {
            item.subjectTypeList = item.subjectType_dictText.split(",");
          });
        }
      });
    },
    getDiceData() {
      this.$http.get(`${apis.getDictItems}/subject_type`).then((res) => {
        if (res.data.code === 0) {
          this.dictList = res.data.result;
          this.dictList.unshift({
            value: "",
            text: "全部专业",
            title: "全部专业",
          });
        }
      });
    },
    joinPath(val) {
      uni.navigateTo({
        url: "/pages/user/invitation/setPost?id=" + val.id,
      });
    },
    delArticle() {
      this.$http.post(`${apis.articleDetete}/${this.delId}`).then((res) => {
        if (res.data.code === 200) {
          this.listQuery.pageNo = 1;
          this.tableData = [];
          this.getList();
        }
      });
    },
    confirm(e) {
      this.labelValue = e[0].label;
      this.listQuery.subjectType = e[0].value;
      this.listQuery.pageNo = 1;
      this.tableData = [];
      this.getList();
    },
		confirmStatus(e) {
			this.labelStatusValue = e[0].label;
			this.listQuery.auditStatus = e[0].value;
			this.listQuery.pageNo = 1;
			this.tableData = [];
			this.getList();
		},
    showEvent() {
      this.show = true;
    },
    delShow(item) {
      this.delshow = true;
      this.delId = item.id;
    },
  },
  onReachBottom() {
		this.listQuery.pageNo += 1;
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
@import "uview-ui/index.scss";
.overTextMultiple {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.wrapper {
  padding: 34rpx 30rpx;
  .header {
    font-size: $artical-text-font;
    color: $text-color;
    padding-bottom: 34rpx;
    border-bottom: 2rpx solid #bfbfbf;
  }
  .sel-icon {
    width: 12rpx;
    height: 7rpx;
    margin-left: 10rpx;
  }
  .del-all-icon {
    margin-left: 20rpx;
    width: 80rpx;
    flex-shrink: 0;
  }
  .content {
    // margin-top: 20rpx;
    .list-item {
      border-bottom: 1px solid #bfbfbf;
      // padding-bottom: 30rpx;
      padding-top: 32rpx;
			width: 100%;
      .dic-all {
        span {
          padding: 0 10rpx;
          border: 1px solid #21d2ff;
          opacity: 1;
          border-radius: 4px;
          color: #21d2ff;
          font-size: 8rpx;
          text-align: center;
          margin: 0 10rpx;
        }
      }
      .title {
        font-size: $artical-title-font;
        color: $text-color;
      }
      .con {
        font-size: $artical-time-font;
        color: $econdary-word-color;
        margin: 20rpx 0;
        margin-bottom: 32rpx;
        .con-item-left {
          width: 50%;
          flex-grow: 1;
          .left {
            margin-bottom: 29rpx;
          }
        }
        .left {
          flex-shrink: 0;
          width: 100%;
          font-size: $artical-text-font;
          color: $econdary-word-color;
          .img-item {
            width: 120px;
            height: 90px;
            background: rgba(0, 0, 0, 0);
            opacity: 0.8;
            border-radius: 4px;
            flex-shrink: 0;
            margin-right: 20rpx;
          }
        }
        .right {
          margin-left: 30rpx;
          .des {
            height: 90px;
          }
          .editorcontent {
            word-break: break-all;
            margin-bottom: 20rpx;
          }
        }
        .edit-icon {
          width: 32.23px;
          height: 32.23px;
          margin-bottom: 10rpx;
        }
        .del-icon {
          width: 31.75px;
          height: 34px;
          flex-shrink: 0;
        }
      }
    }
  }
}
.search-wrapper {
  display: flex;
  .status-wrapper {
    margin-left: 41rpx;
  }
}
.profession-wrapper {
  width: 200rpx;
  height: 52rpx;
  line-height: 52rpx;
  background: #e9ebf4;
  box-shadow: 0px 8rpx 9rpx 0px #dbd9e3;
  border-radius: 6rpx;
  font-size: 26rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #404f76;
  text-align: center;
  display: flex;
  margin-bottom: 34rpx;
  .text {
    padding-left: 39rpx;
  }
}
.title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .status-wrapper {
    display: flex;
    align-items: center;
    padding: 5rpx 20rpx;
    height: 48rpx;
    flex-shrink: 0;
    margin-left: 20rpx;
    .status-image {
      width: 26rpx;
      height: 26rpx;
      margin-right: 13rpx;
    }
    .status-text {
      font-size: 26rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
    }
  }
  .pass {
    background: rgba(51, 171, 160, 0.06);
    border: 2rpx solid #33aba0;
    border-radius: 4rpx;
    color: #33aba0;
  }
	.doing {
		background: rgba(64, 79, 118, 0.06);
		border: 1px solid #404F76;
		border-radius: 4px;
	}
	.nopass {
		background: rgba(247, 126, 60, 0.06);
		border: 1px solid #F77E3C;
		border-radius: 4px;
		color: #F77E3C;
	}
}
.content-box {
  background: red;
  .text {
    height: 60rpx;
  }
}
.icon-text {
	padding: 2rpx 14rpx !important;
	font-size: 14rpx !important;
	border-radius: 4rpx	!important;
}
</style>

<style lang="scss">
	.button-group--right {
		position: relative;
		.button-hock {
			&:first-child {
				background: red;
				&::before {
					content: "";
					position: absolute;
					background-image: url("/static/img/ic_del.png");
					left: 0;
					top: 0;
					width: 44rpx;
					height: 44rpx;
				}

			}
		}
	}
</style>
